<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<script src="/static/js/jquery-1.11.1.min.js"></script>
<head th:include="common/head :: htmlhead">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12" style="padding-top: 1px">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">快捷方式</div>
                        <div class="layui-card-body">
                            <div class="layadmin-shortcut">
                                <ul class="layui-row layui-col-space10">
                                    <li class="layui-col-xs3">
<!--                                        <a th:attr="lay-href=@{/evaluate(type='orgList')}">-->
                                        <a onclick="parent.layui.index.openTabsPage('/evaluate?type=orgList', '网点列表')">
                                            <i class="layui-icon layui-icon-table"></i>
                                            <cite>网点列表</cite>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs3">
                                        <a onclick="parent.layui.index.openTabsPage('/evaluate?type=orgListCollected', '收藏网点')">
                                            <i class="layui-icon layui-icon-star"></i>
                                            <cite>收藏网点</cite>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs3">
                                        <a onclick="parent.layui.index.openTabsPage('/evaluate?type=zonghe', '网点综合评价')">
                                            <i class="layui-icon layui-icon-chart"></i>
                                            <cite>网点综合评价</cite>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">概览</div>
                        <div class="layui-card-body">
                            <div class="layadmin-backlog">
                                <ul class="layui-row layui-col-space10">
                                    <li class="layui-col-xs6">
                                        <a href="#" class="layadmin-backlog-body">
                                            <h3>网点数</h3>
                                            <p><cite id="orgNum"></cite></p>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs6">
                                        <a href="#" class="layadmin-backlog-body">
                                            <h3>效率评价数</h3>
                                            <p><cite id="evaluateNum"></cite></p>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row layui-col-space7.5">
                <div class="layui-card">
                    <div class="layui-card-header">网点分布图</div>
                    <div class="layui-card-body">
                        <div style="height: 480px">
                            <div id="main" style="position: absolute; width: 98%;height:100%; margin-top:-3%;" ></div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<script src="/static/layui/layui.js" charset="utf-8"></script>
<!--<script src="/static/js/echarts.js"></script>-->
<!--<script src="/static/js/china.js"></script>-->
<script>
    layui.config({
        base: '/static/lib/' //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(['index', 'echarts'], function() {

        //概览部分
        $.ajax({
            url:"/overview/gailan?type=evaluate",
            async: false,
            type:"POST",
            success: function(data){
                data = $.parseJSON(data);
                document.getElementById("evaluateNum").innerHTML=data;
            }
        })
        $.ajax({
            url:"/overview/gailan?type=wangdian",
            async: false,
            type:"POST",
            success: function(data){
                data = $.parseJSON(data);
                document.getElementById("orgNum").innerHTML=data;
            }
        })
        var provData=[];
        $.ajax({
            url:"/overview/map",
            async: false,
            type:"POST",
            success: function(data){
                for(var item in data){
                    provData.push(data[item]);
                }
            }
        })


        var echarts = layui.echarts;
        // 绘制图表，准备数据
        var option = {
            tooltip: {
                enterable:true,
                trigger: "item",
                triggerOn: 'click',
                backgroundColor: "#fff",//提示标签背景颜色
                textStyle: { color: "#000000" }, //提示标签字体颜色
                extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',
                formatter:function(params) {
                    return params.name + ':' + params.value;
                }
            },
            series: [
                {
                    // name: '中国',
                    type: 'map',
                    mapType: 'china',
                    selectedMode: 'single',
                    label: {
                        normal: {
                            textStyle:{
                                fontSize:10,
                            },
                            show: true,//显示省份标签
                        },
                        emphasis: {
                            show: false,//对应的鼠标悬浮效果
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderWidth: .5,//区域边框宽度
                            // areaColor: "#E0FFFF",
                        },
                        emphasis: {
                            borderWidth: .5,
                            borderColor: '#4b0082',
                            areaColor: "#1D54C2",
                        }
                    },
                    data: provData
                }
            ],

            dataRange: {
                x: '-1000 px', //图例横轴位置
                y: '-1000 px', //图例纵轴位置
                splitList: [
                    { start: 0, end: 0, color:'#d3f1f6'},
                    { start: 1, end: 10, color: '#bfe9fa'},
                    { start: 10, end: 20, color: '#7dbff0'},
                    { start: 20, end: 30, color: '#76baef'},
                    { start: 30, end: 40, color: '#3b94e6'},
                    { start: 40, end: 50, color: '#2083e2'},
                    { start: 50, color: '#006edd'},
                ]
            }, //各省地图颜色；start：值域开始值；end：值域结束值；label：图例名称；color：自定义颜色值；


        };
        //初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 点击省份跳转页面
        myChart.on('click', function (param) {
            var shengfen = param.name;
            var title = "网点列表";
            var url = '/evaluate?type=orgList&shengfen='+shengfen+'&field=shangquanf&order=desc';
            parent.layui.index.openTabsPage(url, title);
        });

        // myChart.on('mouseover', function (param) {
        //     var shengfen = param.name;
        //     // var url = '/evaluate?type=zonghe';
        //     var num = 10;
        //     // var info = shengfen + ':' +num;
        //     var info = document.getElementById('input')
        //     info.innerHTML = shengfen + ':' +num;
        // });
        myChart.setOption(option);

    });
</script>


</body>
</html>